<template>
  <div class="logo">
    <!-- 成就系统 -->
    <img src="@\assets\image\big_Achievements.png" alt="" />
    <div class="left">
      <img @click="handleclick" src="@\assets\image\icon\icon_5.png" alt="" />
    </div>
    <div class="chengjiu">
      <p class="chengjiudianhezi"><i>成就点</i><span>?</span></p>
      <p class="num">0</p>
    </div>
    <div class="chengjiulist">
      <p>个人成就</p>
      <ul>
        <li v-for="item in list" :key="item.title">
          <img :src="item.url" alt="" />
          <span>{{ item.title }}</span>
          <div></div>
        </li>
      </ul>
    </div>
    <div class="last_box">
      <p>活动成就</p>

      <div class="photo">
        <img src="@\assets\image\Achievements.png" alt="" />
        <span>暂时还没有活动成就哦</span>
      </div>
    </div>
  </div>
</template>

<script>
import { AchievementsListApi } from "../../utils/api";
export default {
  data() {
    return {
      list: [
        // {
        //   title: "持之以恒",
        //   url: "http://10.31.169.33:3000/images/Achievements/Achievements_6.png",
        // },
        // {
        //   title: "孜孜不倦",
        //   url: "http://10.31.169.33:3000/images/Achievements/Achievements_6.png",
        // },
        // {
        //   title: "我是学霸",
        //   url: "http://10.31.169.33:3000/images/Achievements/Achievements_6.png",
        // },
        // {
        //   title: "常胜冠军",
        //   url: "http://10.31.169.33:3000/images/Achievements/Achievements_6.png",
        // },
        // {
        //   title: "持之以恒",
        //   url: "http://10.31.169.33:3000/images/Achievements/Achievements_6.png",
        // },
        // {
        //   title: "孜孜不倦",
        //   url: "http://10.31.169.33:3000/images/Achievements/Achievements_6.png",
        // },
        // {
        //   title: "我是学霸",
        //   url: "http://10.31.169.33:3000/images/Achievements/Achievements_6.png",
        // },
      ],
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.AchievementsList();
  },

  methods: {
    handleclick() {
      console.log(1);
      this.$router.push("/home/Achievements");
    },
    async AchievementsList() {
      const res = await AchievementsListApi();
      console.log(res);
      this.list = res.result;
      // await this.$nextTick();
      // console.log(1);
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
.logo {
  height: 190px;
  // width: 380px;
  position: relative;
  img {
    width: 99%;
    // height: 100%;
  }
  .left {
    position: absolute;
    top: 30px;
    left: 10px;
    img {
      margin-left: 5px;
      width: 10px;
      transform: rotate(180deg);
    }
  }
  .chengjiu {
    position: absolute;
    top: 70px;
    left: 10px;

    p {
      color: white;
      font-size: 16px;
      span {
        // padding: 5px;
        // background-color: #463;
        height: 18px;
        width: 18px;
        .center ();
        border: 1px solid wheat;
        border-radius: 50%;
        margin-left: 5px;
        font-size: 14px;
        // line-height: 10px;
      }
    }
    .num {
      margin-top: 5px;
      // font-size: 18px;
    }
    .chengjiudianhezi {
      display: flex;
    }
  }
  .chengjiulist {
    border: 1px solid #ccc;
    // height: 2.93333rem;
    width: 90%;
    margin: -30px auto 0 auto;
    background: white;
    margin-bottom: 20px;
    position: relative;
    top: -0.8rem;
    border-radius: 0.8rem;
    box-shadow: 0 0.02667rem 0.26667rem -0.16rem #000000;
    p {
      font-size: 16px;
      padding: 10px 10px;
      margin-bottom: 10px;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        margin-bottom: 20px;
        width: 100px;
        // height: 100px;
        display: flex;
        .align();
        margin-left: 10px;
        span {
          font-size: 14px;
          text-align: center;
          margin-top: 5px;
        }
        img {
          width: 50px;
        }
        div {
          height: 3px;
          background: #d3d3d3;
          width: 45px;
          margin-top: 5px;
          border-radius: 25px;
        }
      }
    }
  }
  .last_box {
    border: 1px solid #ccc;
    // height: 3.5rem;
    height: 200px;
    width: 90%;
    margin: auto;
    background: white;
    position: relative;
    top: -0.8rem;
    border-radius: 0.8rem;
    box-shadow: 0 0.02667rem 0.26667rem -0.16rem #000000;
    position: relative;
    p {
      margin: 10px;
      font-size: 14px;
    }
    img {
      position: absolute;
      bottom: 70px;
      height: 90px;
      width: auto;
    }
    .photo {
      display: flex;
      .align();
      span {
        font-size: 16px;
        margin-top: 115px;
      }
    }
  }
}
</style>
